{extend name="base" /}
{block name="body"}
<style type="text/css">
#wBox{width: 940px; margin: 0px auto 40px 110px;}
#wBox ul{ border: 1px solid #e6e6e6; width: 380px; float:left; list-style:none; padding:10px; height:200px; overflow:auto;}
#wBox ul li{ border:1px solid #ccc; height:22px; line-height:22px; text-align:center; margin:3px; cursor:pointer;}
#wBox ul li em{font-style: normal;}
#wBox ul li.noSelect{ border-color:#000; background:#eee; color:#ccc; cursor:default;}
#wBox ul li.biaoji{ background:#FFC; border-color:#F90; font-weight:bold;}
#wBox ul#listBox1{ margin-right:10px;}
#wBox ul#listBox2{ float:right;}
#liAdd,liRemove{font-size: 14px;margin: 0px auto;display: block;}
.cf{ clear:both;}
.move{width: 50px;margin: auto;border: 1px solid #e6e6e6;text-align: center;padding: 10px;cursor: pointer;}
.pos_cen{position: relative;top: 60px;width: 70px; margin: auto;}
</style>
<div class="layui-body">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class=""><a href="{:url('admin/subject/index')}">专题管理</a></li>
            <li class=""><a href="{:url('admin/subject/add')}">添加专题</a></li>
            <li class="layui-this">编辑专题</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form form-container" action="{:url('admin/subject/update')}" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">专题名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" value="{$data.name}" required  lay-verify="required" placeholder="请输入专题名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">专题拼音</label>
                        <div class="layui-input-block">
                            <input type="text" name="pingying" value="{$data.pingying}" required  lay-verify="required" placeholder="请输入专题拼音" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">缩略图</label>
                        <div class="layui-input-block">
                            <input type="text" name="thumb" value="{$data.thumb}" class="layui-input layui-input-inline" id="thumb">
                            <input type="file" name="file" class="layui-upload-file">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">简介</label>
                        <div class="layui-input-block">
                            <textarea name="introduction" placeholder="" class="layui-textarea">{$data.introduction}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="seo_title" value="{$data.seo_title}" placeholder="请输入SEO标题" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO关键字</label>
                        <div class="layui-input-block">
                            <input type="text" name="keyword" value="{$data.keyword}" placeholder="请输入SEO关键字" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO说明</label>
                        <div class="layui-input-block">
                            <textarea name="description" placeholder="请输入SEO说明" class="layui-textarea">{$data.description}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否热门</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_hot" value="1" title="是" {if condition="$data.is_hot==1"} checked="checked"{/if}>
                            <input type="radio" name="is_hot" value="0" title="否" {if condition="$data.is_hot==0"} checked="checked"{/if}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input type="text" name="sort" value="{$data.sort}" required  lay-verify="required" class="layui-input">
                        </div>
                    </div>
<!--                    <div class="layui-form-item">
                        <label class="layui-form-label">文章分类</label>
                        <div class="layui-input-block">
                            <select>
                                <option value="" >请选择文章分类</option>
                                {foreach name="category_level_list" item="vo"}
                                <option value="{$vo.id}">{neq name="vo.level" value="1"}|{php}for($i=1;$i<$vo['level'];$i++){echo ' ----';}{/php}{/neq} {$vo.name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">关键字搜索</label>
                        <div class="layui-input-block">
                            <input type="text" name="key" value=""  class="layui-input key">
                        </div>
                    </div>
                    
                    <div id="wBox">
                        <ul id="listBox2">
                            {if condition="$article_list"}
                            {volist name='article_list' id="v" }
                                <li><em data-id="{$v.id}">{$v.title}</em></li>
                            {/volist}
                            {/if}
                        </ul>
                            
                            <ul id="listBox1">
                            <!--<li class="noSelect"><em>1</em></li>-->
                            
                            </ul>
                        <div class="pos_cen">
                            <div id="liAdd"><div class="move">添加→</div></div>
                            <div id="liRemove" style="margin-top: 20px;"><div class="move">←移除</div></div>
                        </div>
                        
                        <div class="cf">
                            
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="hidden" name="article_ids" value="{$data.article_ids}" id="liVal">
                            <input type="hidden" name="id" value="{$data.id}">
                            <button class="layui-btn" lay-submit lay-filter="*">保存</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
$(function(){
    $('.key').on('blur',function(){
        var key = $(this).val();
        
        //获取该关键字的文章
        $.getJSON('/admin/subject/getArticleByKey',{key:key},function(data){
            if(data.status ==1){
                var html ='';
                $.each(data.data,function(k,v){
                    html+='<li><em data-id="'+v.id+'">'+v.title+'</em></li>';
                })
                $('#listBox1').empty().append(html);
            }else{
                $('#listBox1').empty();
                layer.msg(data.message);
            }
        })
    })
}) 


$(function(){
	
	//选择
	$('#wBox').on('click','li:not(".noSelect")',function(){
		$(this).toggleClass('biaoji');
	})
	//添加
	$('#liAdd').click(function(){	
		if($('#listBox1>li').hasClass('biaoji')){
			var selectLi = $('#listBox1>li.biaoji');
			var liHtml = "";
			lival = $('#liVal').val();
			for(var i=0; i<selectLi.length; i++){
				liHtml += '<li>'+selectLi.eq(i).html()+'</li>';
				lival += selectLi.eq(i).find('em:first').data('id')+',';
				$('#liVal').val(lival);
				selectLi.eq(i).remove();
			}
			$(liHtml).appendTo('#listBox2');
		}else{
                    layer.msg('请选择文章');
		}
	})
	//移除
	$('#liRemove').click(function(){
		if($('#listBox2>li').hasClass('biaoji')){
			var selectLi = $('#listBox2>li.biaoji');
			var liHtml = "";
			for(var i=0; i<selectLi.length; i++){
				liHtml += '<li>'+selectLi.eq(i).html()+'</li>';
				var liMove = selectLi.eq(i).find('em:first').data('id')+',';
				liMove = $('#liVal').val().replace(liMove,'');
				$('#liVal').val(liMove);
				selectLi.eq(i).remove();
			}
			$(liHtml).appendTo('#listBox1');
		}else{
			 layer.msg('请选择文章');
		}
	})
});
</script>
{/block}